import { Space } from "antd";
import Filter from "../Filter";
import Table from "../Table";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { useEffect } from "react";
import Create from "../Create";
import { getGameAsync } from "@/store/game/gameSlice";

export default function Panel() {
  const {params, table} = useAppSelector(state => state.game)
  const dispatch = useAppDispatch()

  useEffect(() => {
    if(['init', 'error'].includes(table.status)){
      dispatch(getGameAsync({...params}))
    }
  }, [])

  return (
    <Space direction="vertical" className="w-full" size="large">
      <Filter />
      <Table />
      <Create />
    </Space>
  );
}
